import { VComponent } from './framework';

export class Carousel extends VComponent {
  protected root: HTMLDivElement | null = null;
  protected attributes: Record<string, any> = Object.create(null);

  private startX: number = 0;
  private position: number = 0;

  setAttribute(name: string, value: any) {
    this.attributes[name] = value;
  }

  render() {
    this.root = document.createElement('div');
    this.root.classList.add('v-carousel');

    for (let record of this.attributes['src']) {
      const child = document.createElement('div');

      child.style.backgroundImage = `url('${record}')`;

      this.root.appendChild(child);
    }

    this.root.addEventListener('mousedown', this.handleMouseDown);

    // let currentImageIndex = 0;

    // const timer = setInterval(() => {
    //   if (this.root == null) {
    //     clearInterval(timer);
    //     return;
    //   }

    //   const children = this.root.children;

    //   let nextImageIndex = (currentImageIndex + 1) % children.length;

    //   const currentImage = children[currentImageIndex] as HTMLImageElement;
    //   const nextImage = children[nextImageIndex] as HTMLImageElement;

    //   nextImage.style.transition = 'none';
    //   // 将下一张图片放在可视位置右侧，注意图片本身的位置有偏移
    //   nextImage.style.transform = `translateX(${100 - nextImageIndex * 100}%)`;

    //   setTimeout(() => {
    //     // 先还原动画的设置
    //     nextImage.style.transition = '';
    //     // 将当前图片平移至可视位置左侧，同样注意图片本身的位置有偏移
    //     currentImage.style.transform = `translateX(${-100 - currentImageIndex * 100}%)`;
    //     // 将下一张图片平移至可视位置内
    //     nextImage.style.transform = `translateX(${-nextImageIndex * 100}%)`;

    //     currentImageIndex = nextImageIndex;
    //   }, 16);
    // }, 3000);

    return this.root;
  }

  mountTo(parent: Node) {
    parent.appendChild(this.render());
  }

  handleMouseMove = (event: MouseEvent) => {
    const children = this.root?.children;

    if (children == null) {
      return;
    }

    const x = event.clientX - this.startX;

    const currentImageIndex = this.position - (x - x % 500) / 500;

    for (let offset of [-1, 0, 1, 2]) {
      let index = currentImageIndex + offset;
      if (index < 0) {
        index = (index + Math.ceil(-index / children.length) * children.length) % children.length;
      } else {
        index = index % children.length;
      }
      const child = children[index] as HTMLImageElement;

      child.style.transition = 'none';
      child.style.transform = `translateX(${-index * 500 + offset * 500 + x % 500}px)`;
    }
  }

  handleMouseDown = (event: MouseEvent) => {
    this.startX = event.clientX;

    document.addEventListener('mousemove', this.handleMouseMove);
    document.addEventListener('mouseup', this.handleMouseUp);
  }

  handleMouseUp = (event: MouseEvent) => {
    const children = this.root?.children;

    if (children == null) {
      return;
    }

    const x = event.clientX - this.startX;
    this.position = this.position - Math.round(x / 500);

    // FIXME: 这里其实还是会有问题的，应该计算全部图片的位置
    for (let offset of [0, - Math.sign(Math.round(x / 500) - x + 250 * Math.sign(x))]) {
      let index = this.position + offset;

      if (index < 0) {
        index = (index + Math.ceil(-index / children.length) * children.length) % children.length;
      } else {
        index = index % children.length;
      }

      const child = children[index] as HTMLImageElement;

      child.style.transition = '';
      child.style.transform = `translateX(${-index * 500 + offset * 500}px)`;
    }

    document.removeEventListener('mouseup', this.handleMouseUp);
    document.removeEventListener('mousemove', this.handleMouseMove);
  }
}